<template>
  <div>
    <el-tabs v-model="waterPlantId" type="border-card">
      <el-tab-pane
        v-for="(item, index) in waterPlant"
        :key="index.toString()"
        :label="item.title"
        :name="item.configurationid"
      >
        <iframe class="imageClo" :src="httpUrl"></iframe>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { postConfiguration } from '../http/http'
import { waterPlant } from './List/wterList'
export default {
  data() {
    return {
      configurationId: '1773526834473443329',
      httpUrl: '',
      waterPlant,
      waterPlantId: '1776803194465787906',
    }
  },
  watch: {
    // 监听 deepData 对象的变化
    waterPlantId: {
      handler(newValue) {
        postConfiguration({ configurationId: newValue }).then((res) => {
          this.httpUrl = res.data
        })
      },
      // 设置 deep 选项为 true，以深度监听 deepData 的变化
      immediate: true,
    },
  },
  methods: {
    // postConfiguraTion(id) {
    //   postConfiguration({ configurationId: id }).then((res) => {
    //     this.httpUrl = res.data
    //     console.log(res.data)
    //   })
    // },
  },
  created() {
    // this.postConfiguraTion('1776803194465787906')
  },
}
</script>

<style>
.imageClo {
  width: 100%;
  height: 450px;
  background: #03142c;
}
.el-tabs--border-card {
  /* height: 600px; */
}
</style>
